<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- 微软的老式浏览器 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <!-- 显示窗口 宽度 是 客户端的 屏幕 宽度 （就是 满屏 ！），显示的文字和图形的初始比例 是 1.0 -->
    <link rel="stylesheet" href="css/layui.css" media="all">
    <link rel="stylesheet" href="css/layui.mobile.css">
    <link rel="stylesheet" type="text/css" href="css/style.css"><!-- 基本样式 -->
    <link rel="stylesheet" type="text/css" href="css/about.css"><!-- 基本样式 -->
    <script src="js/common.js"></script>
    <title>邀请好友</title>
    <style>
        .m-user-messageCenter {
            padding-bottom: 10px;
            margin-top: 0;
            border-top: 5px solid #F5F5F5;
            border-bottom: 1px solid #F5F5F5;
        }
        .unlock h2 {
            line-height: 24px;
        }
        .spinner{width:20px;height:20px;position:fixed;z-index:1002;top:50%;margin-top:-10px;left:50%;margin-left:-10px}.container1>div,.container2>div,.container3>div{width:6px;height:6px;background-color:#ff536a;border-radius:100%;position:absolute;-webkit-animation:bouncedelay 1.2s infinite ease-in-out;animation:bouncedelay 1.2s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}.spinner .spinner-container{position:absolute;width:100%;height:100%}.container2{-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}.container3{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg)}.circle1{top:0;left:0}.circle2{top:0;right:0}.circle3{right:0;bottom:0}.circle4{left:0;bottom:0}.container2 .circle1{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.container3 .circle1{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}.container1 .circle2{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}.container2 .circle2{-webkit-animation-delay:-0.8s;animation-delay:-0.8s}.container3 .circle2{-webkit-animation-delay:-0.7s;animation-delay:-0.7s}.container1 .circle3{-webkit-animation-delay:-0.6s;animation-delay:-0.6s}.container2 .circle3{-webkit-animation-delay:-0.5s;animation-delay:-0.5s}.container3 .circle3{-webkit-animation-delay:-0.4s;animation-delay:-0.4s}.container1 .circle4{-webkit-animation-delay:-0.3s;animation-delay:-0.3s}.container2 .circle4{-webkit-animation-delay:-0.2s;animation-delay:-0.2s}.container3 .circle4{-webkit-animation-delay:-0.1s;animation-delay:-0.1s}@-webkit-keyframes bouncedelay{0%,80%,100%{-webkit-transform:scale(0.0)}40%{-webkit-transform:scale(1.0)}}@keyframes bouncedelay{0%,80%,100%{transform:scale(0.0);-webkit-transform:scale(0.0)}40%{transform:scale(1.0);-webkit-transform:scale(1.0)}}#loading .mask{position:fixed;width:100%;background-color:#fff;top:0;left:0;height:100%;z-index:1001}

        .Invite-friends p {
            color:rgb(139, 139, 139);
            /*color: #f36666;*/
            text-align: center;
             line-height: 18px;
            padding: 10px 0;
            font-size: 14px;
        }
        .h2{
            text-align: center;
            margin-top: 20px;
            font-size: 16px;
        }.img{
                     position: absolute;
                     top: 0;
                     left: 0;
                     width: 96%;
                     z-index: 11;
            display: none;
                 }.yqrs{
                                       padding: 10px 0;
                                       color: #f36666;
                                       text-align: center;
                                   }
    </style>
</head>
<body style="background:#fff;">
<div id="loading">
    <div class="mask"></div>
    <div class="spinner">
        <div class="spinner-container container1">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container2">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container3">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
    </div>
</div>
  <div>
      <div class="Invite-friends">
        <img src="cssimg/invetfirend.png" alt="">
          <h2 class="h2">好基友好闺蜜还没解决人生大事？</h2>
        <p>邀请好友上架得50CP币，完成认证得118CP币哦~~赶快邀请他们吧！</p>
      </div>
      <div class="Invite-btn">
        <button id="fxbtn">邀请得168CP币</button>
          <p class="yqrs">已邀请<span id="sl">0</span>人</p>
      </div>
      <div id="list">
          <!--<div class="m-user-messageCenter pr" data-id="27" onclick="getuseInfo(this)">-->
              <!--<div class="system-messagesunlock">-->
                  <!--<img src="http://cpfile.oss-cn-beijing.aliyuncs.com/portrait_pic/ccc829b23619627becbf68d3b48c2680.jpg">-->
                  <!--<div class="unlock">-->
                      <!--<h2>李超</h2>-->
                      <!--<span>码农.29岁.170cm</span>-->
                  <!--</div>-->
                  <!--&lt;!&ndash;<p>解锁照片</p>&ndash;&gt;-->
              <!--</div>-->
          <!--</div>-->
      </div>
  </div>
<div class="mask2"></div>
<img src="cssimg/sharetip@3x.png" class="img">
</body>
</html>
<script src="js/jquery/jquery-2.2.4.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="js/utils.js"></script>
<script src="js/share.js"></script>
<script>
    Utils.historyBack();
    $("body").css("height",$(window).height());
    var time=Date.parse(new Date())/1000;
    getxx();
    function getxx() {
        $.ajax({
            type : "GET",
            url : getRequestUrl("/user/get_share_user"),
            data:{
                timestamp:time,
                page_size:20
            },
            success : function(datas) {
                console.log(datas);
                var data=datas.response_params.result;
                $("#sl").html(datas.response_params.total_cnt);
                var str="";
                $.each(data,function (i,el) {
                    str+=`<div class="m-user-messageCenter pr" data-id=${el.user_id} onclick="getuseInfo(this)">
                              <div class="system-messagesunlock">
                                  <img src=${el.portrait}>
                                  <div class="unlock">
                                      <h2>${el.nick_name}</h2>
                                      <span>${el.industry} ▪ ${el.age}岁 ▪ ${el.height}cm</span>
                                  </div>
                              </div>
                          </div>`
                });
                $(str).appendTo("#list");
                $("#loading").hide();

            },
            error : function(err) {
                dealCPErrorResponse(err);
            }
        });
    }
    $("#fxbtn").on('click',function () {
        $(".mask2").show();
        $(".img").show();
        $("html,body").css("overflow","hidden")
    });
    $(".mask2").on('click',function () {
        $(this).hide();
        $(".img").hide();
        $("html,body").css("overflow","")
    })
    function getuseInfo(obj) {
        var $this=$(obj);
        var id=$this.attr("data-id");
        window.location.href="Personal-information.html?userid="+id;
    }
</script>